<template>
<div class="wrapper" ref="wrapper">
      <div class="wrapper-container">
           <!-- 下拉 -->
        <div class="PullingDown">
          <img v-show="loosen" src="@/assets/img/scroll/Spinner-1s-64px.svg" alt="">
          <img v-show="!loosen" src="@/assets/img/scroll/up.png" alt="" :style="{transform: PullingDownTop ? 'rotate(0deg)' : 'rotate(180deg)'}">
          <span>{{loosen?'加载中···':PullingDownTop?'松开刷新':'下拉刷新'}}</span>
        </div>
        <div class="content"> 
          <slot></slot>
          </div>
      </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
name:'Scroll',
data() {
return {
   scroll:null,
   loosen:false,
   PullingDownTop:false
}
},
props:{
  probeType:{
      type:Number,
      default:0
  },
  pullUpLoad:{
      type:Boolean,
      default:false
  },
  pullDownRefresh:{
      type:Boolean,
      default:false
  }
},
//生命周期 - 创建完成（访问当前this实例）
created() {
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
    // 初始化BScroll 实例
    this.scroll=new BScroll(this.$refs.wrapper,{
        click:true,
        probeType:this.probeType,//0 代表不派发 scroll 事件 3 派发 scroll 事件
        pullUpLoad:this.pullUpLoad,
        pullDownRefresh:this.pullDownRefresh
    })
    // 获取滚动位置
    this.scroll.on('scroll',(options)=>{
        if(options.y>50){
              this.PullingDownTop = true
        }else{
              this.PullingDownTop = false
        }
         this.$emit('scrollLocation',options)
    })
    // 监听上拉加载
    this.scroll.on('pullingUp',()=>{
         this.$emit('pullingUp')
    })
    // 监听下拉加载
     this.scroll.on('pullingDown',()=>{
          this.loosen = true
         this.$emit('pullingDown')  
    })
    // 监听滚动开始
      this.scroll.on('scrollStart',()=>{
          this.loosen = false,
          this.PullingDownTop=true
      })
},
methods:{
    //  上拉加载数据加载完毕 需要调用此方法告诉 better-scroll 数据已加载。
    finishPullUp(){
         this.scroll.finishPullUp()
    },
    // 当下拉刷新数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
    finishPullDown(){
        this.scroll.finishPullDown()
    },
    // 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
    refresh(){
        this.scroll.refresh()
    },
    //滚动到指定的位置
    scrollTo(){
         this.scroll.scrollTo(x, y, time, easing)
    }
}
}
</script>
<style scoped lang='less'>
 .wrapper {
    position: relative;
    height: calc(100% + 46px);
    transform: translateY(-46px);
    overflow: hidden;
  }
.PullingDown {
  display: flex;
  align-items: center;
  justify-content: center;
  height:46px;
  line-height:46px;

  img {
    width:32px;
    height:32px;
  }

  img:nth-child(2) {
    transition: all .3s linear;
    width:24px;
    height: 24px;
  }

  span {
    color: #606c71;
    font-size:15px;
  }
}
</style>